<template>
    <div class="productDetalis" >
        <div class="img">
            <img :src="list.PictureTop" srcset />
            <div class="img-text">
                <div class="title">
                    <div class="title-name">{{list.ProName}}</div>
                    <div class="title-info">{{list.Spec}}</div>
                </div>
                <div class="manufactor">厂家：{{list.FactoryName}}</div>
                <div class="bottom">
                    <div>批文准字号：{{list.StdDocID}}</div>
                    <div>有效期：{{list.ShelfLife}}</div>
                </div>
            </div>
        </div>
        <!-- <div class="detailed">
            <div class="detailed-wrap">
                <div class="detailed-title">成分</div>
                <div class="detailed-text">肿节风、三七、人工牛黄、肖梵天花、珍珠层粉等</div>
            </div>
            <div class="detailed-wrap">
                <div class="detailed-title">功能主治</div>
                <div class="detailed-text">清热解毒,活血化瘀,消肿止痛。用于热毒瘀血所致的咽喉肿痛、牙痛、痹痛、胁痛、黄疸、无名肿毒等症。</div>
            </div>
            <div class="detailed-wrap">
                <div class="detailed-title">用法用量</div>
                <div class="detailed-text">口服，一次2～4片，一日3次，小儿酌减。外用，用冷开水调化，敷患处。</div>
            </div>
        </div>-->
        <div v-html="list.Detail"></div>
    </div>
</template>
<script>
import { getItemInfo } from './service';
export default {
    data() {
        return {
            list: {}
        };
    },
    methods: {
        getTablesListData() {
            getItemInfo({
                id: this.$route.query.ID
            }).then(res => {
                this.list = res.data;

                this.list.Detail = this.list.Detail.replace(/&lt;/g, '<')
                    .replace(/&gt;/g, '>')
                    .replace(/<pre>/g, '')
                    .replace(/<br>/g, '')
                    .replace(/<code>/g, '')
                    .replace(/<\/pre>/g, '')
                    .replace(/<\/code>/g, '')
                    .replace(/<p>/g, '')
                    .replace(/&nbsp;/g, '')
                    .replace(/<\/p>/g, '');
                // this.loading = false;
                // this.total = res.data.records;
            });
        }
    },
    created() {
        this.getTablesListData();
    }
};
</script>

<style lang="less" >
.productDetalis {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f6f6f6;
    font-family: '微软雅黑';
    .img {
        text-align: center;
        background: #fff;
        padding: 10px;
        position: relative;
        img {
            height: 250px;
            width: 100%;
            margin-bottom: 5px;
        }
        .img-text {
            position: absolute;
            // bottom: -50px;

            left: 2.5%;
            z-index: 100;
            width: 95%;
            height: 100px;
            text-align: left;
            color: #fff;
            background: linear-gradient(90deg, rgba(67, 154, 212, 1) 0%, rgba(43, 185, 186, 1) 100%);
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
            border-radius: 5px;
            .bottom {
                padding-left: 10px;
                padding-right: 10px;
                display: flex;
                justify-content: space-between;
            }
            .manufactor {
                padding-left: 10px;
            }
            .title {
                display: flex;
                justify-content: space-between;
                padding: 10px;
                padding-right: 0;
                .title-name {
                    font-size: 20px;
                    font-weight: 400;
                    color: rgba(255, 255, 255, 1);
                }
                .title-info {
                    width: 120px;
                    height: 36px;
                    background: rgba(255, 255, 255, 1);
                    border-radius: 28px 0px 0px 28px;
                    color: #2bb8ba;
                    line-height: 36px;
                    font-size: 13px;
                    text-align: center;
                }
            }
        }
    }
    .detailed {
        width: 95%;
        margin: 0 auto;
        margin-top: 80px;
        background: #fff;
        border-radius: 5px;
        padding: 20px 0;
        .detailed-wrap {
            padding: 0 20px;
        }
        .detailed-title {
            color: #2bb8ba;
            font-size: 15px;
            font-weight: 500;
            margin-top: 20px;
            position: relative;
        }
        .detailed-title::after {
            content: '';
            width: 10px;
            height: 15px;
            background-size: cover;
            position: absolute;
            background: url('../../../assets/images/radius.png') no-repeat;
            left: -20px;
            top: 5px;
        }
        .detailed-text {
            font-size: 14px;
            border-bottom: 1px dashed rgba(136, 136, 136, 1);
            padding-bottom: 20px;
        }
    }
}
</style>